<!-- 菜谱页面 -->
<template>
  <div class="Menu">
    <!-- 组件 头部搜索 -->
    <xrzp-HeaderSearch @onSearch="onSearch" />

    <!-- 标题栏 -->
    <van-tabs v-model="active" class="title" title-active-color="#ee0a24" background="#FFFAFA" v-if="!NotSearch">
      <template>
        <van-tab :title="isSearch&&item.name==arr[active].name?search:item.name" v-for="(item, index) in arr" :key="index" />
      </template>
    </van-tabs>

    <!-- 加载动画 -->
    <xrzp-Loading v-if="!menuData&&!NotSearch"></xrzp-Loading>

    <!-- 未搜索到数据 -->
    <xrzp-EmptyState v-else-if="NotSearch"></xrzp-EmptyState>   
  
    <!-- 内容模块 -->
    <div v-else-if="menuData">
      <van-list v-model="loading" finished-text="没有更多了" @load="loadMore" :finished="finished">
        <van-row>
          <div v-for="(item, index) in menuData" :key="index">
            <van-col span="11">
              <router-link :to="`/menu/MenuDetail/${item.id}`">
                <img :src="item.pic" />
                <div class="content_title">
                  {{ item.name }}
                </div>
              </router-link>
              <div>
                <p class="text_left">用餐人数:{{ item.peoplenum }}</p>
                <div @click="add(item.id)">
                  <span class="text_right">{{ num(item) }}</span>
                  <van-icon name="like" color="red" v-if="isLike(item)"></van-icon>
                  <van-icon name="like-o" color="" v-else></van-icon>
                </div>
              </div>
            </van-col>
          </div>
        </van-row>
      </van-list>
      <xrzp-Istop class="mb50"></xrzp-Istop>
    </div>
    <!-- 底部选项卡 -->
    <xrzp-FootTabbar></xrzp-FootTabbar>
  </div>
</template>

<script>
// 引入组件
import HeaderSearch from "@/components/HeaderSearch.vue";
import EmptyState from "@/components/EmptyState.vue";
import { axios_byclass,axios_search } from "@/api/data_axios";
import { mapState } from "vuex";
export default {
  // 组件局部注册
  components:{"xrzp-HeaderSearch": HeaderSearch,"xrzp-EmptyState": EmptyState},
  data() {
    return {
      NotSearch:false, // 未搜索到数据 
      active: 0,
      start:0,         // 起始条数
      loading: false,  // 加载状态
      finished: false, // 完成状态
      search: "",      // 搜索的值
      isSearch: false, // 搜索 判断条件
      arr: [
        { classid: 562, name: "早餐" },
        { classid: 563, name: "午餐" },
        { classid: 564, name: "下午茶" },
        { classid: 565, name: "晚餐" },
      ],
      menuData: null,  // 菜谱数据
      appkey:"b0e7418fe9bef46dcb47a53374ffbef1"
    };
  },
  computed:{
    ...mapState(["likenumInt"]),
    num(){
      return (item)=>{
        let newid = item.id;
        if (this.likenumInt.some(i=>i.id == newid)) { 
          return this.likenumInt.filter(i=>i.id == newid)[0].count;
        } else {
          return newid;
        } 
      }
    },
    isLike(){
      return (item)=>{
        return this.likenumInt.some(i=>i.id == item.id);
      }
    }
  },
  watch: {
    active: {
      handler(newval) {
        window.scrollTo(0, 0);
        this.start = 0;
        this.isSearch = false;
        this.finished = false;
        this.loading = false;
        this.getData(this.arr[newval].classid);
      },
      immediate: true //开启首次监听赋值（不开启首次监听不到）
    }
  },
  methods: {
    // 点击搜索发送请求
    onSearch(search) {
      if (search !== "") { //非空值进行搜索
        this.isSearch = true;
        this.start = 0;
        this.search = search;
        window.scrollTo(0, 0);
        let data ={
          keyword:search,
          start:0,
          num:20,
          appkey:this.appkey
        }
        axios_search(data).then(res=>{
          this.menuData = res.result.result.list;
          this.NotSearch = res.result.msg == "没有信息";
        })
      } else { //空值复原
        this.isSearch = false;
        this.start = 0;
        this.search = "";
        this.NotSearch = false;
        this.finished = false;
        this.loading = false;
        window.scrollTo(0, 0);
        this.getData(this.arr[this.active].classid);
      }
    },
    getData(classid) {
      let data ={
        classid,
        start:0,
        num:20,
        appkey:this.appkey
      }
      axios_byclass(data).then(res=>{
        this.menuData = res.result.result.list;
        this.NotSearch = res.result.msg == "没有信息";
      })
    },
    // 触底加载
    loadMore() {
      this.start += 20;
      this.loading = true;
      if ( this.isSearch ) {
        let data ={
          keyword:this.search,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        axios_search(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.menuData = [...this.menuData,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      } else {
        let data ={
          classid:this.arr[this.active].classid,
          start:this.start,
          num:20,
          appkey:this.appkey
        }
        axios_byclass(data).then(res=>{
          if ( res.result.msg == "没有信息") {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.menuData = [...this.menuData,...res.result.result.list];
            // 加载状态结束
            this.loading = false;
          }
        })
      }
    }, 
    add(id) {
      this.$store.commit("addLike",id);
    },
  },
};
</script>

<style lang="scss" scoped>
.Menu {
  .title {
    margin-left: -15px;
    position: fixed;
    width: 100%;
    top: 54px;
    left: 14px;
    z-index: 10;
    .van-tab {
      margin: -15px 0;
    }
  }
  .van-list {
    margin: 101px 0px 50px 0;
    .van-col {
      margin: 0 0px 10px 10px;
      border: 2px solid skyblue;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        display: block;
      }
      .content_title {
        font-weight: 900;
        font-size: 12px;
        color: #000;
        height: 21.6px;
        overflow: hidden;
      }
      .text_left {
        font-size: 12px;
        font-weight: 400;
        float: left;
        margin: 0 2px;
      }
      .text_right {
        font-size: 12px;
        font-weight: 400;
        float: right;
        margin: 0 2px;
      }
      .van-icon {
        float: right;
      }
    }
  }
}
</style>
